<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>ios11.1.2的iphoneX下输入框被遮盖</title>
        <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
          .container {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
          .header {
            height: 50px;
          }
          .main {
            flex: 1;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
          }
          .wrapper{
            height: 100%;
          }
          .footer {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            height: 50px;
            align-items: center;
            justify-content: center;
          }
          .footer input{
            -webkit-flex: 1;
            -moz-flex: 1;
            -ms-flex: 1;
            -o-flex: 1;
            flex: 1;
          }
          .footer button{
            height:30px;
            margin:0 10px;
          }
        </style>
    </head>
    <body>
          <div class="container">
            <div class="header"></div>
            <div class="main">
                <div class="wrapper">
                    <p>怎样使iphoneX中的输入框不被遮盖</p>
                </div>
            </div>
            <div class="footer">
                <input type="text" name="" id="" placeholder="你可以输入你想说的话与大家一起交流" />
                <button>发送</button>
            </div>
          </div>
        
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var $inputEle = $('#inputEle');
            var $footer = $('.footer');
            var $boxTip = $('#box-tip');
            var $tipInfo = $('#tipInfo');
            var inputEle = document.getElementById('inputEle');
            let Width = window.innerWidth,
                Height = window.innerHeight,
                scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
            var str = 'scrollTop:'+document.body.scrollTop+';innerHeight'+window.innerHeight+';scrollHeight:'+document.body.scrollHeight;
            alert(str);
            //判断元素是否在可视区域，不在的话返回true, 在返回false
            // function notInView() {
            //     // getBoundingClientRect 是获取定位的，很怪异, (iphone 6s 10.0 bate版表现特殊)
            //     // top: 元素顶部到窗口（可是区域）顶部
            //     // bottom: 元素底部到窗口顶部
            //     // left: 元素左侧到窗口左侧
            //     // right: 元素右侧到窗口左侧
            //     // width/height 元素宽高
            //        let bottom = $footer.get(0).getBoundingClientRect().bottom;
            //    // alert('bottom:'+bottom+';innerHeight'+window.innerHeight)
            //        // 可视区域高度 - 元素底部到窗口顶部的高度 < 0, 则说明被键盘挡住了
            //     if (window.innerHeight - bottom < 0) {
            //         return true
            //     }
            //     return false
            // }
            $inputEle.focus(function(){
                $footer.moveToView();
                // interval = setInterval(function(){
                //     // 1.该区域为空时，输入框在ios中的表现为，输入文字再点击输入框被遮盖，再点击输入框，输入框才会出现在输入法的上面
                //     document.body.scrollTop = document.body.scrollHeight;// 2.iphone6,ios10.3.2测试无问题
                //     // $footer.css('bottom',document.body.scrollTop);// 3.ios中输入框跑到头部，不能紧挨输入法
                // })
                // setTimeout(() => {
                //     var nScrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
                //     $tipInfo.text('scrollHeight:'+scrollHeight+';nScrollHeight'+nScrollHeight+';scrollTop:'+document.body.scrollTop+';innerHeight:'+window.innerHeight).parent().parent().css('display','table');
                //     interval && clearInterval(interval)
                // }, 600)
                
            }).blur(function(){
                // if(interval){
                //      $footer.css('bottom',0);
                //     clearInterval(interval)
                // }
                // $tipInfo.text('').parent().parent().hide()
            })
            // android, 键盘弹起/收回会触发resize事件
            // window.onresize = function () {
            //     alert('Height:'+Height+';innerHeight'+window.innerHeight)
            //     // Height: 键盘没有弹出时window.innerHeight
            //     if (Height == window.innerHeight) {
            //         $footer.css({'top': window.innerHeight + 'px','bottom':'initial'})
            //     }
            // }
//判断元素是否在想要的区域，不在的话返回position；这段代码依赖zepto
$.fn.notInView = function(perc) {
    perc = perc || 0;

    var pos = this[0].getBoundingClientRect(), 
        // getBoundingClientRect 是获取定位的，很怪异
        // top: 元素顶部到窗口（可是区域）顶部
        // bottom: 元素底部到窗口顶部
        // left: 元素左侧到窗口左侧
        // right: 元素右侧到窗口左侧
        // width/height 元素宽高

        $window = $(window),
        view = {
            height: $window.height(),
            width: $window.width()
        },
        minTop = perc * ( view.height - pos.height ); 
        //最小距离，判断元素是否在想要的位置

    if (pos.top < minTop || pos.top > view.height || pos.left < 0 || pos.left > view.width) {
        pos.viewHeight = view.height;
        pos.viewWidth = view.width;
        return pos;
    }
    return false;
}
//将元素移动到指定位置 perc百分比布局，0是顶部，1是底部
$.fn.moveToView = function(perc) { //百分比
    var type = this.css('position');
    //普通布局之外的将整个页面滚动到指定位置
    if( type !== 'fixed' ) { 
        var pos = this.notInView(perc);
        if (pos) {
            var $window = $(window),
                oldScrollY = $window.scrollTop(),
                scrollY = oldScrollY + pos.top - perc * ( pos.viewHeight - pos.height ); 

            $(window).scrollTop(scrollY);
        };
    } 
    //fixed 布局处理
    else {
        this.css({
            'transform': 'translate3d(0, 0, 0)',
            '-webkit-transform': 'translate3d(0, 0, 0)'
        });
        var pos = this.notInView(perc);
        if (pos) {
            perc = perc || 0;
            var y = perc *( pos.viewHeight - pos.height ) - pos.top;
            this.css({
                'transform': 'translate3d(0, '+ y +'px, 0)',
                '-webkit-transform': 'translate3d(0, '+ y +'px, 0)'
            });
        }
    }
}
        </script>
    </body>
</html>